<template>
    <view>
        <view class="fail-box" v-if="formData.status == -1">{{ formData.check_desc }}</view>
        <view class="from">
            <picker :range="list" range-key="identity_name" @change="picker_change">
                <view class="from-item">
                    <view class="font-30">{{ $t('agentPage.identity_name') }}</view>
                    <view :class="['more font-28', formData.identity_id ? '' : 'cc']">{{ list[listIndex] && list[listIndex].identity_name }}</view>
                </view>
            </picker>
        </view>

        <view class="small-tlt">{{ $t('agentPage.companyInformation') }}</view>
        <view class="from">
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.name') }}</view>
                <input class="font-28" v-model="formData.name" :placeholder="$t('agentPage.namePlaceholder')" placeholder-class="cc" />
            </view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.mobile') }}</view>
                <input class="font-28" v-model="formData.mobile" :placeholder="$t('agentPage.mobilePlaceholder')" placeholder-class="cc" />
            </view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.email') }}</view>
                <input class="font-28" v-model="formData.email" :placeholder="$t('agentPage.emailPlaceholder')" placeholder-class="cc" />
            </view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.address') }}</view>
                <textarea auto-height class="font-28" v-model="formData.address" :placeholder="$t('agentPage.addressPlaceholder')" placeholder-class="cc" />
            </view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.identification') }}</view>
            </view>
            <view class="img-box">
                <image class="before-img" :src="$image + formData.identification_ob" @tap="chooseBefore"></image>
                <image class="after-img" :src="$image + formData.identification_re" @tap="chooseAfter"></image>
            </view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.license') }}</view>
            </view>
            <view class="img-box"><image class="zhizhao-img" :src="$image + formData.license" @tap="chooseLin"></image></view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.bank_license') }}</view>
            </view>
            <view class="img-box"><image class="ali-img" :src="$image + formData.bank_license" @tap="chooseBank"></image></view>
        </view>

        <view class="small-tlt">{{ $t('agentPage.accountInfomation') }}</view>
        <view class="from">
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.companyName') }}</view>
                <input class="font-28" v-model="formData.company_name" :placeholder="$t('agentPage.companyNamePlaceholder')" placeholder-class="cc" />
            </view>
            <!-- <view class="from-item">
                <view class="font-30">姓名</view>
                <input class="font-28" v-model="formData.realname" placeholder="请输入开户人姓名" placeholder-class="cc" />
            </view> -->
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.bankCard') }}</view>
                <input class="font-28" v-model="formData.bank_card" :placeholder="$t('agentPage.bankCardPlaceholder')" placeholder-class="cc" />
            </view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.bankName') }}</view>
                <input class="font-28" v-model="formData.bank_name" :placeholder="$t('agentPage.bankNamePlaceholder')" placeholder-class="cc" />
            </view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.bankAddress') }}</view>
                <textarea auto-height class="font-28" v-model="formData.bank_address" :placeholder="$t('agentPage.bankAddressPlaceholder')" placeholder-class="cc" />
            </view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.desc') }}</view>
                <textarea auto-height class="font-28" v-model="formData.desc" :placeholder="$t('agentPage.descPlaceholder')" placeholder-class="cc" />
            </view>
            <view class="from-item">
                <view class="font-30">{{ $t('agentPage.accessory') }}</view>
            </view>
            <view class="img-list">
                <view class="img-box" v-for="(item, index) in imgList" :key="index">
                    <image class="close-btn" src="/static/close_b.png" @tap="delImg(index)"></image>
                    <image class="ali-img" :src="$image + item"></image>
                </view>
                <view class="img-box" v-if="imgList.length < 3"><image class="ali-img" @tap="chooseAcc"></image></view>
            </view>
        </view>

        <view class="buttom font-32" :class="[$i18n.locale]" @tap="submit">{{ $t('submitTips') }}</view>
        <view class="ios-btm"></view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            list: [],
            listIndex: 0,
            identity_name: '请选择',
            formData: {
                identity_id: '',
                name: '',
                mobile: '',
                email: '',
                address: '',
                identification_ob: '',
                identification_re: '',
                license: '',
                bank_license: '',
                company_name: '',
                // realname:'',
                bank_card: '',
                bank_name: '',
                bank_address: '',
                desc: '',
                accessory: ''
            },
            imgList: []
        }
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: this.$t('agentPage.navigationBarTitle')
        })
        this.$http('get|api/user/apply_partner').then(res => {
            this.list = res.result.identity
            this.formData.identity_id = this.list[this.listIndex] ? this.list[this.listIndex].id : ''
            if (res.result.user_embassy) {
                // this.formData = res.result.user_embassy
                this.formData = Object.assign(this.formData, res.result.user_embassy)
                if (this.formData.accessory) {
                    this.imgList = this.formData.accessory
                }
            }
        })
    },
    computed: {
        ...mapState(['$image']),
        typeName() {
            if (!this.list.length) {
                return '请选择'
            }
            let temp = '请选择'
            this.list.forEach(item => {
                if (item.id === this.formData.identity_id) {
                    temp = item.identity_name
                }
            })
            return temp
        }
    },
    methods: {
        delImg(i) {
            this.imgList.splice(i, 1)
        },
        picker_change(e) {
            this.listIndex = e.detail.value
            this.formData.identity_id = this.list[this.listIndex].id
            // console.log(this.formData.identity_id)
            // this.identity_name = this.list[e.detail.value].identity_name;
        },
        submit() {
            console.log('this.formData', this.formData)
            if (!this.formData.identity_id) {
                this.$toastApp(this.$t('agentPage.identity_namePlaceholder'))
                return
            }
            if (!this.formData.name) {
                this.$toastApp(this.$t('agentPage.namePlaceholder'))
                return
            }
            if (!this.formData.mobile) {
                this.$toastApp(this.$t('agentPage.mobilePlaceholder'))
                return
            }
            if (!this.formData.email) {
                this.$toastApp(this.$t('agentPage.emailPlaceholder'))
                return
            }
            if (!this.formData.address) {
                this.$toastApp(this.$t('agentPage.addressPlaceholder'))
                return
            }
            if (!this.formData.identification_ob) {
                this.$toastApp(this.$t('agentPage.identification_obPlaceholder'))
                return
            }
            if (!this.formData.identification_re) {
                this.$toastApp(this.$t('agentPage.identification_rePlaceholder'))
                return
            }
            if (!this.formData.license) {
                this.$toastApp(this.$t('agentPage.licensePlaceholder'))
                return
            }
            if (!this.formData.company_name) {
                this.$toastApp(this.$t('agentPage.companyNamePlaceholder'))
                return
            }
            // if (!this.formData.realname) {
            //     this.$toastApp('开户人姓名不能为空')
            //     return
            // }
            if (!this.formData.bank_card) {
                this.$toastApp(this.$t('agentPage.bankCardPlaceholder'))
                return
            }
            if (!this.formData.bank_name) {
                this.$toastApp(this.$t('agentPage.bankNamePlaceholder'))
                return
            }
            if (!this.formData.bank_address) {
                this.$toastApp(this.$t('agentPage.bankAddressPlaceholder'))
                return
            }
            uni.showLoading({
                mask: true
            })
            // console.log(this.from);
            this.formData.accessory = this.imgList
            this.$http('post|api/user/apply_partner', this.formData)
                .then(res => {
                    // console.log(res)
                    this.$toastApp(res.msg)
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1000)
                })
                .catch(e => {
                    // console.log(e)
                    this.$toastApp(e.msg)
                })
        },
        chooseBefore() {
            let that = this
            uni.chooseImage({
                count: 1,
                sizeType: 'compressed',
                success: chooseImageRes => {
                    uni.showLoading({
                        mask: true,
                        title: this.$t('loading')
                    })
                    that.$uploadCom(chooseImageRes).then(res => {
                        that.formData.identification_ob = res.result
                        uni.hideLoading()
                        that.$forceUpdate()
                        uni.showToast({
                            title: this.$t('agentPage.uploadSuccess')
                        })
                    })
                }
            })
        },
        chooseAfter() {
            let that = this
            uni.chooseImage({
                count: 1,
                sizeType: 'compressed',
                success: chooseImageRes => {
                    uni.showLoading({
                        mask: true,
                        title: this.$t('loading')
                    })
                    this.$uploadCom(chooseImageRes).then(res => {
                        that.formData.identification_re = res.result
                        uni.hideLoading()
                        that.$forceUpdate()
                        uni.showToast({
                            title: this.$t('agentPage.uploadSuccess')
                        })
                    })
                }
            })
        },
        chooseLin() {
            let that = this
            uni.chooseImage({
                count: 1,
                sizeType: 'compressed',
                success: chooseImageRes => {
                    uni.showLoading({
                        mask: true,
                        title: this.$t('loading')
                    })
                    this.$uploadCom(chooseImageRes).then(res => {
                        that.formData.license = res.result
                        uni.hideLoading()
                        that.$forceUpdate()
                        uni.showToast({
                            title: this.$t('agentPage.uploadSuccess')
                        })
                    })
                }
            })
        },
        chooseBank() {
            let that = this
            uni.chooseImage({
                count: 1,
                sizeType: 'compressed',
                success: chooseImageRes => {
                    uni.showLoading({
                        mask: true,
                        title: this.$t('loading')
                    })
                    this.$uploadCom(chooseImageRes).then(res => {
                        that.formData.bank_license = res.result
                        uni.hideLoading()
                        that.$forceUpdate()
                        uni.showToast({
                            title: this.$t('agentPage.uploadSuccess')
                        })
                        // console.log(that.$image + that.formData.bank_license)
                    })
                }
            })
        },
        chooseAcc() {
            let that = this
            uni.chooseImage({
                count: 1,
                sizeType: 'compressed',
                success: chooseImageRes => {
                    uni.showLoading({
                        mask: true,
                        title: this.$t('loading')
                    })
                    this.$uploadCom(chooseImageRes).then(res => {
                        that.imgList.push(res.result)
                        uni.hideLoading()
                        that.$forceUpdate()
                        uni.showToast({
                            title: this.$t('agentPage.uploadSuccess')
                        })
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss">
page {
    background-color: #f7f7f7;
}
.fail-box {
    box-sizing: border-box;
    position: sticky;
    top: 0;
    width: 100vw;
    z-index: 999999;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #ffffff;
    padding: 20rpx 30rpx;
    background-color: #ff615d;
}
.from {
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;

    .from-item:first-child {
        border-top: none;
    }

    .from-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1rpx solid rgba(223, 227, 230, 1);
        padding: 30rpx 0;
        color: #313133;
        font-size: 28rpx;

        .more {
            position: relative;
            padding-right: 40rpx;
        }

        .more::after {
            content: '';
            position: absolute;
            height: 40rpx;
            width: 40rpx;
            background-image: url(../../static/more.png);
            background-size: 100%;
            right: 0;
            top: 50%;
            margin-top: -20rpx;
        }

        .cc {
            color: #cccccc;
        }

        input {
            text-align: right;
            width: 70%;
        }

        textarea {
            text-align: right;
            width: 70%;
        }
    }
}

.small-tlt {
    display: flex;
    align-items: center;
    height: 76rpx;
    color: #a2a7ba;
    font-size: 26rpx;
    line-height: 36rpx;
    padding-left: 30rpx;
}

.buttom {
    width: 690rpx;
    height: 90rpx;
    // background: rgba(78, 110, 243, 1);
    border-radius: 45rpx;
    text-align: center;
    line-height: 90rpx;
    margin: 0rpx auto;
    margin-top: 60rpx;
    color: #ffffff;
    &.zh {
        background-color: var(--theme);
    }
    &.hk {
        background-color: var(--themeHK);
    }
}

.img-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 30rpx;
    image {
        width: 328rpx;
        height: 220rpx;
    }
    .close-btn {
        position: absolute;
        top: -16rpx;
        right: -16rpx;
        // transform: rotate(45deg);
        width: 40rpx;
        height: 40rpx;
        z-index: 9;
    }
    .before-img {
        background-image: url(../../static/idCard_before.png);
        background-size: 100%;
    }
    .after-img {
        background-image: url(../../static/idCard_after.png);
        background-size: 100%;
    }
    .zhizhao-img {
        background-image: url(../../static/zhizhao.png);
        background-size: 100%;
    }
    .ali-img {
        width: 180rpx;
        height: 180rpx;
        background-image: url(../../static/add_img.png);
        background-size: 100%;
    }
}
.img-list {
    display: flex;
    align-items: center;
    .img-box:not(:first-child) {
        margin-left: 30rpx;
    }
}
</style>
